<!-- 分类组件 -->
<template>
	<view>
		<view>
			<!-- 分类框 宫格组件 -->
			<u-grid :border="false"  col="5">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex" @click="onclickFN(baseListItem.title)">
					<view class="icontu">
						<text :class="baseListItem.name"></text>
					</view>
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		name: "child",
		data() {
			return {
				// 分类数据
				baseList: [{
						name: 'iconfont icon-yueliang',
						title: '中秋节'
					},
					{
						name: 'iconfont icon-zongzi',
						title: '端午节'
					},
					{
						name: 'iconfont icon-aixin',
						title: '情人节'
					},
					{
						name: 'iconfont icon-woshiyisheng',
						title: '医师节'
					},
					{
						name: 'iconfont icon-denglong',
						title: '元宵节'
					},
					{
						name: 'iconfont icon-yanhua',
						title: '春节'
					},
					{
						name: 'iconfont icon-yezishu',
						title: '大理'
					}, {
						name: 'iconfont icon-zhongqing',
						title: '重庆'
					},
					{
						name: 'iconfont icon-niu',
						title: '西藏'
					}, {
						name: 'iconfont icon-quanbu',
						title: '全部'
					}
				]
			};
		},
		methods: {
			// 宫格点击事件
			onclickFN(val) {
				this.$emit('onclickTag',val)
			}
		}
	}
</script>

<style lang="scss">
	/* 字体样式 */
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.icontu {
		margin-top: 30rpx;
		font-size: 56rpx;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		.iconfont{
			color: #000000;
			margin-bottom: 10rpx;
		}
		}
</style>
